﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>siluan信息</title>
    
    <link href="./firstpage/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./firstpage/css/common.css">
    <link rel="stylesheet" href="./css/layoutHZZ.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="./css/li.css">
    <link rel="stylesheet" href="./css/gis.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/gis.css" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <style type="text/css">
    html,
    body {
         margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
    }input,b,p{margin-left:5px;font-size:14px}
    	.layui-table tbody tr:hover, .layui-table thead tr{
    		background-color: rgb(8,24,50);
    	}
    	.layui-table{
    		background-color: rgba(7, 41, 81, 0.85);
    		color: #d6dbe2;
    	}
    	.layui-table td, .layui-table th{
    		border-color: #004867;
    	}
    	body .layui-layer-title{
    		border-bottom: 1px solid #034c6a;
        }
        /*图层管理样式重新定义*/
        /* 选中管理树，背景仍然是白色 */
        .tree-node-selected{background-color:#fff}
        #treeBox .tree-title{ font-size: 14px}
        .tree-node {
            height: 18px;
            white-space: nowrap;
            cursor: pointer;
            margin: 2px;
        }
        .infoTemplatestable table
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            font-weight:bold;
            color:crimson;
        }
        .infoTemplatestable tr
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            color:crimson;
        }
        .infoTemplatestable th
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
            
        }
        .infoTemplatestable td
        {
            border: 1px solid white;
            text-align: center;
            /* background-color:rgba(23,93,154,0.55); */
            font-size:12px;
           
        }
        
        .infoTemplatestable table .white
        {
            color:rgb(255, 255, 255);
            
        }
        .infoTemplatestable table .blue
        {
            /* background-color:rgba(48,96,143,0.55); */
        }
        .infoTemplatestable td
        {
            height: 40px;
        }
        .infoTemplatestable table .th-width
        {
            width:198px;

        }
        .infoTemplatestable table .td-width
        {
            width:200px;
            
        }

        
        
        
        #exChart-div {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 340px;
        height: 230px;
        background-color: rgba(0, 0, 0, 0.7);
        border: 1px solid #034c6a;
        box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
        0px -10px 15px #034c6a inset, /*上边阴影*/
        10px 0px 15px #034c6a inset, /*右边阴影*/
        0px 10px 15px #034c6a inset;
        display: none;
    }

    #exChart{
        width: calc(100% - 10px); 
        height: calc(100% - 10px); 
        padding: 5px
    }
        
    </style>
</head>
<script>
    // var curPath = window.document.location.href;
    // var package_path = curPath.substring(0, curPath.lastIndexOf("/"));
    // var dojoConfig = {
    //     packages: [{
    //         name: 'measure',
    //         location: package_path + '/measure'
    //     }],
    //     parseOnLoad: false
    // };
    </script>
    
<body onLoad="onLoad()">
    <input type="button" style="background-color: #7ED321;width: 76px;height: 36px;color: #FFFFFF;margin-left:200px;"value="开启" onClick="polygonTool.open();"/>
    <input type="button" style="background-color: #7ED321;width: 76px;height: 36px;color: #FFFFFF;margin-right:200px;"value="关闭" onClick="polygonTool.close();"/>
        <div style="position: fixed; left: 200px; right: 0; height: 100%">
        <div id="map" >
        </div>
    </div>
    </div>
</body>
<script>
        var map;
        var center;
        var marker;
        var infoWin;
        var radius = 25000;
        var zoom = polygonTool;
        function onLoad() {
        //初始化地图对象
        map = new T.Map("map", {datasourcesControl: true});
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(119.65969, 38.69945), 8);
        //创建对象
        var ctrl = new T.Control.MapType();
        //添加控件
        map.addControl(ctrl);
        center = new T.LngLat(122.428477,39.200027);
        center2 = new T.LngLat(117.333602,38.37659);
        center3 = new T.LngLat(117.464971,38.382021);
        center4 = new T.LngLat(121.264857,38.854583);
        center5 = new T.LngLat(116.578594,38.091076);
        center6 = new T.LngLat(116.828539,38.580904);
        center7 = new T.LngLat(121.918949,39.629184);
        center8 = new T.LngLat(122.962795,39.751067);
        center9 = new T.LngLat(116.87,38.30);
            //创建信息窗口对象
            //创建信息窗口对象
            marker = new T.Marker(center);
            marker2 = new T.Marker(center2);// 创建标注
            marker3 = new T.Marker(center3);
            marker4 = new T.Marker(center4);
            marker5 = new T.Marker(center5);
            marker6 = new T.Marker(center6);
            marker7 = new T.Marker(center7);
            marker8 = new T.Marker(center8);
            marker9 = new T.Marker(center9);
            map.addOverLay(marker);
            map.addOverLay(marker2);
            map.addOverLay(marker3);
            map.addOverLay(marker4);
            map.addOverLay(marker5);
            map.addOverLay(marker6);
            map.addOverLay(marker7);
            map.addOverLay(marker8);
            map.addOverLay(marker9);

            var infoWin1 = new T.InfoWindow();
            var infoWin2 = new T.InfoWindow();
            var infoWin3 = new T.InfoWindow();
            var infoWin4 = new T.InfoWindow();
            var infoWin5 = new T.InfoWindow();
            var infoWin6 = new T.InfoWindow();
            var infoWin7 = new T.InfoWindow();
            var infoWin8 = new T.InfoWindow();
            var infoWin9 = new T.InfoWindow();
            var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/大连海产品.png' width='100' height='70' title='海产品'/>" +
                "<div style='margin:10px 0px 10px 120px;'>地址：<br>产品描述：大连海产品丰富多样，干海产品：海米、虾皮、干海参、干鲍鱼、各种鱼干(腌制)、各种鱼类、贝类、螃蟹" +
                "</div>" +
                "<input  id='keyWord' value='酒店' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent2 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/黄骅梭子蟹.png' width='100' height='70' title='梭子蟹'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：黄骅梭子蟹蟹肉洁白，肉多，肉质细嫩，膏似凝脂，味道2厘米左右，果实香甜，酥脆可口。" +
                "</div>" +
                "<input  id='keyWord' value='酒店' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent3 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/黄骅小麦粉.png' width='100' height='70' title='小麦粉'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：黄骅小麦粉中的蛋白质含量比其他谷物产品高，一般在11%以上，高的可达15%--20%。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent4 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/旅顺樱桃.png' width='100' height='70' title='樱桃'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：旅顺大樱桃历史悠久品种齐全，有70多个品种，色泽艳丽、光泽度好，风味独特，甜酸适口，维生素含量丰富。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent5 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/泊头鸭梨.png' width='100' height='70' title='鸭梨'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：泊头鸭梨是河北省沧州市的特产，泊头鸭梨果形俊秀，皮簿肉细，脆嫩多汁，香甜爽口。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent6 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/青县羊角脆.png' width='100' height='70' title='羊角脆'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：青县羊角脆，肉色淡绿，瓜瓤桔红色，极为美观。肉厚2厘米左右，果实香甜，酥脆可口。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent7 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/瓦房店苹果.png' width='100' height='70' title='苹果'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：瓦房店是“苹果之乡”，苹果品种繁多，包括国光、八月酥、迎秋等，瓦房店小国光苹果，香脆可口，极易储藏。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent8 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/庄河大骨鸡.png' width='100' height='70' title='大骨鸡'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：庄河大骨鸡鸡体大墩实，觅食力强，产蛋多而大，且蛋壳厚而坚实，肉质鲜嫩。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent9 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/沧县金丝小枣.png' width='100' height='70' title='金丝小枣'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：沧县金丝小枣一般为椭圆形和鹅卵形，核小皮薄，果肉丰满，肉质细腻，鲜枣鲜红色，肉质清脆；干果肉薄而坚韧" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
            infoWin1.setContent(sContent);
            infoWin2.setContent(sContent2);
            infoWin3.setContent(sContent3);
            infoWin4.setContent(sContent4);
            infoWin5.setContent(sContent5);
            infoWin6.setContent(sContent6);
            infoWin7.setContent(sContent7);
            infoWin8.setContent(sContent8);
            infoWin9.setContent(sContent9);

            marker.addEventListener("click", function () {
                marker.openInfoWindow(infoWin1);
            })
            marker2.addEventListener("click", function () {
                marker2.openInfoWindow(infoWin2);
            })
            marker3.addEventListener("click", function () {
                marker3.openInfoWindow(infoWin3);
            })
            marker4.addEventListener("click", function () {
                marker4.openInfoWindow(infoWin4);
            })
            marker5.addEventListener("click", function () {
                marker5.openInfoWindow(infoWin5);
            })
            marker6.addEventListener("click", function () {
                marker6.openInfoWindow(infoWin6);
            })
            marker7.addEventListener("click", function () {
                marker7.openInfoWindow(infoWin7);
            })
            marker8.addEventListener("click", function () {
                marker8.openInfoWindow(infoWin8);
            })
            marker9.addEventListener("click", function () {
                marker9.openInfoWindow(infoWin9);
            });

            var config = {
                pageCapacity: 10,	//每页显示的数量
                onSearchComplete: localSearchResult	//接收数据的回调函数
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);

            var config = {
                showLabel: true,
                color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
            };
            //创建标注工具对象
            polygonTool = new T.PolygonTool(map, config);
        }
        function localSearchResult(result) {
            //清空地图及搜索列表
            clearAll();
            //创建圆
            createCircle();
            //解析点数据结果
            pois(result.getPois());
        }
        //解析点数据结果
        function pois(obj) {
            if (obj) {
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;
                        //地址
                        var address = obj[i].address;
                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        var winHtml = "地址:" + address;
                        //创建标注对象
                        var marker = new T.Marker(lnglat);
                        //地图上添加标注点
                        map.addOverLay(marker);
                        //注册标注点的点击事件
                        marker.addEventListener("click", function () {
                            this.showPosition(marker, name, winHtml);
                        }, this);
                    })(i);
                }
            }
        }
        //圆形
        function createCircle() {
            var config = {
                color: "blue", //折线颜色
                fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                weight: "3", //折线的宽度，以像素为单位
                opacity: 0.5,    //折线的透明度，取值范围0 - 1
                fillOpacity: 0.4,
                lineStyle: "solid" //折线的样式，solid或dashed
            };
            //定义该矩形的显示区域
            var circle = new T.Circle(center, radius, config);
            map.addOverLay(circle);
        }
        //显示信息框
        function showPosition(marker, name, winHtml) {
            if (infoWin) {
                map.removeOverLay(infoWin);
                infoWin = null;
            }
            var html = "<h3>" + name + "</h3>";
            html += winHtml;
            infoWin = new T.InfoWindow(html);
            marker.openInfoWindow(infoWin);
        }
        //清空地图及搜索列表
        function clearAll() {
            map.clearOverLays();
        }
</script>
<script src="./firstpage/js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=57f8889c991ed45face5f3869002651b"></script>
<script src="./firstpage/js/bootstrap.min.js"></script>
<script src="./echarts/echarts.min.js"></script>
<script type="text/javascript" src="./firstpage/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>
<script type="text/javascript" src="./firstpage/js/drag.js"></script>
<script src="https://js.arcgis.com/3.30/init.js"></script>

</html>